<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">{{title}}</span>
        </div>
        <div id="list">
          <ul id="list_top">
            <li>
              <span class="list_title">年度:</span>
              <select v-model="year">
                <option :value="item" v-for="(item, index) in year_list">{{item}}</option>
              </select>
            </li>
          </ul>
          <ul id="list_bottom">
            <li>
              <span class="list_title">知识产权对企业竞争力的作用:</span>
              <textarea v-model="content1">{{content1}}</textarea>
            </li>
            <li>
              <span class="list_title">科技成果转化情况:</span>
              <textarea v-model="content2">{{content2}}</textarea>
            </li>
            <li>
              <span class="list_title">研究开发与技术创新组织管理情况:</span>
              <textarea v-model="content3">{{content3}}</textarea>
            </li>
            <li>
              <span class="list_title">管理与科技人员情况:</span>
              <textarea v-model="content4">{{content4}}</textarea>
            </li>
          </ul>
          <div id="btnbox">
            <button class="add_tankuang_btn" @click="save">保存</button>
            <button class="add_tankuang_btn" @click="cancel">取消</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import { Toast } from 'mint-ui';
  export default {
    name: 'abilityToInnovate_add',
    components: {
      Routers,
      Header
    },
    data () {
      return {
        id:null,
        title:'添加',
        year_list:[],
        year:'',
        content1:'',
        content2:'',
        content3:'',
        content4:''
      }
    },
    mounted: function() {
      let id = this.$route.params.id
      if(id){
        this.id = id
        this.axios.get('/index/show_innovate?id='+this.id).then((res)=>{
          if(res.data.code==1){
            let datas = res.data.data
            this.title = '编辑'
            this.year = datas.year
            this.content1 = datas.know_affect
            this.content2 = datas.science_res
            this.content3 = datas.research_situation
            this.content4 = datas.science_situation
          }else{
            Toast(res.data.msg)
            return
          }
        })
      }

      let year = new Date().getFullYear()
      for(let i = year; i>=year-10; i--){
        this.year_list.push(i)
      }
    },
    methods: {
      save () {
        if(!this.year||!this.content1||!this.content2||!this.content3||!this.content4){
          Toast('内容必须填写完整！！')
          return
        }
        this.axios.post('/index/save_innovate',{
          id:this.id||'',
          year:this.year,
          know_affect:this.content1,
          science_res:this.content2,
          research_situation:this.content3,
          science_situation:this.content4
        }).then((res)=>{
          if(res.data.code==1){
            this.$router.push('/abilityToInnovate')
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      cancel () {
        this.$router.push('/abilityToInnovate')
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  #list{
    width:900px;
  }
  #list_top{
    display: flex;

    align-items: center;
    flex-wrap: wrap;
    padding-top:34px;
    box-sizing: border-box;
  }
  #list_top>li{
    /*width:400px;*/
    /*flex:1;!**!*/
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-bottom:27px;
  }
  #list_top>li>select{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  .list_title{
    color: #333;
    font-size:16px;
    padding-right:15px;
    display: inline-block;
    width:300px;
    text-align: right;
    box-sizing: border-box;
  }
  #list_bottom>li{
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-bottom:27px;
  }
  #list_bottom textarea{
    width:600px;
    height:146px;
    resize: none;
    box-sizing: border-box;
    border:1px solid #ddd;
    padding:10px;
    margin:0;
    outline: none;
  }
  #btnbox{
    padding-left:300px;
  }
  #btnbox>button:first-child{
    margin-right:32px;
  }
</style>
